<template>
  <div class="task-list">
    <div class="table-header">
      <el-button
        size="small"
        type="success"
        plain
        @click="onTaskEdit()"
        icon="el-icon-plus"
      >
        添加任务
      </el-button>
    </div>
    <el-table border :data="tableData" size="small">
      <el-table-column
        label="任务名"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="组名"
        prop="groupName"
        align="center"
      ></el-table-column>
      <el-table-column label="cron表达式" prop="cron"></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag size="small" :type="scope.row.status ? 'success' : 'warning'">
            {{ scope.row.status ? "运行中" : "停止" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="任务描述" prop="description"></el-table-column>
      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="scope">
          <el-button
            plain
            type="primary"
            size="small"
            @click="onTaskEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-show="scope.row.status"
            plain
            type="warning"
            size="small"
            @click="onTaskStop(scope.row.id)"
          >
            停止
          </el-button>
          <el-button
            v-show="!scope.row.status"
            plain
            type="success"
            size="small"
            @click="onTaskStart(scope.row.id)"
          >
            启动
          </el-button>
          <el-button
            plain
            type="danger"
            size="small"
            @click="onTaskDel(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="showEdit"
      :title="editType + '短信提醒任务'"
      append-to-body
      custom-class="task-list-dialog"
    >
      <el-form label-width="100px" size="small">
        <el-form-item label="任务名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="cron表达式">
          <div class="span">{{ form.cron }}</div>
          <el-button type="primary" @click="showEditCron = true" plain>
            编辑cron
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="onTaskEditConfirm" size="small">
          {{ editType }}
        </el-button>
        <el-button @click="onReset" size="small"> 重置 </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showEditCron" append-to-body>
      <cron v-model="form.cron"></cron>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "../api/messageTask";
export default {
  data() {
    return {
      tableData: [],
      editType: "添加",
      showEdit: false,
      showEditCron: false,
      form: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onTaskStart(id) {
      api.start({ id }, 1).then(this.getList);
    },
    onTaskStop(id) {
      api.stop({ id }, 1).then(this.getList);
    },
    onTaskDel(id) {
      api.del({ id }, 1).then(this.getList);
    },
    onTaskEdit(task) {
      if (task) {
        this.editType = "更新";
        this.form = task;
      } else {
        this.editType = "添加";
        this.form = {
          name: "",
          description: "",
          cron: "",
          groupName: "短信提醒",
        };
      }
      this.showEdit = true;
    },
    onTaskEditConfirm() {
      let task;
      if (this.editType == "添加") {
        task = api.add(this.form, 1);
      } else {
        (task = api.update(this.form)), 1;
      }
      task.then(() => {
        this.getList();
        this.showEdit = false;
      });
    },
    onReset() {
      this.form.name = "";
      this.form.cron = "";
      this.form.description = "";
    },
    getList() {
      api.getList({ groupName: "短信提醒" }).then(({ data }) => {
        this.tableData = data;
      });
    },
  },
};
</script>
<style lang="scss">
.task-list {
  .table-header {
    text-align: right;
    padding: 20px 0;
  }
}
.task-list-dialog {
  width: 500px;
  padding-right: 30px;
  .el-dialog__footer {
    .el-button {
      width: 100px;
    }
  }
  .el-form-item__content {
    .span {
      padding: 0 15px;
      line-height: 32px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      flex: 1;
    }
    display: flex;
    .el-button {
      margin-left: 20px;
    }
  }
}
</style>